import React, { Component } from 'react'

export default class App extends Component {
  state = { 
    firstName: '',
    lastName: '',
    note: '',
    lesson: '1',
    sex: '男',
    hobby: ['篮球'],
    flag: false
  }
  changeHandler = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  changeHobbyHandler = (event) => {
    console.log(event.target.value, event.target.checked)
    if (event.target.checked) {
      this.setState({
        hobby: [...this.state.hobby, event.target.value]
      })
    } else {
      const arr = this.state.hobby
      const index = arr.findIndex(item => item === event.target.value)
      arr.splice(index, 1)
      this.setState({
        hobby: arr
      })
    }
  }
  changeFlagHandler = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
  render() {
    return (
      <div>
        <input type="text" name="firstName" value={ this.state.firstName } onChange={ this.changeHandler }/> + 
        <input type="text" name="lastName"  value={ this.state.lastName } onChange={ this.changeHandler }/> =
        { this.state.firstName + this.state.lastName }
        <hr />
        <textarea name="note" value={ this.state.note } onChange={ this.changeHandler }></textarea>
        <hr />
        <select name="lesson" value={ this.state.lesson } onChange={ this.changeHandler }>
          <option value="1">1阶段</option>
          <option value="2">2阶段</option>
          <option value="3">3阶段</option>
        </select>
        <hr />
        {/* <input type="radio" name="sex" value="男" onChange={ this.changeSexHandler }/>男
        <input type="radio" name="sex" value="女" onChange={ this.changeSexHandler }/>女 */}
        <input type="radio" checked = { this.state.sex === '男' } name="sex" value="男" onChange={ this.changeHandler }/>男
        <input type="radio" checked = { this.state.sex === '女' } name="sex" value="女" onChange={ this.changeHandler }/>女
        <hr />
        <input type="checkbox" checked = { this.state.hobby.includes('篮球') } name="hobby" value="篮球" onChange={ this.changeHobbyHandler }/>篮球
        <input type="checkbox" checked = { this.state.hobby.includes('足球') } name="hobby" value="足球" onChange={ this.changeHobbyHandler }/>足球
        <input type="checkbox" checked = { this.state.hobby.includes('排球') } name="hobby" value="排球" onChange={ this.changeHobbyHandler }/>排球
        <input type="checkbox" checked = { this.state.hobby.includes('网球') } name="hobby" value="网球" onChange={ this.changeHobbyHandler }/>网球
        <input type="checkbox" checked = { this.state.hobby.includes('台球') } name="hobby" value="台球" onChange={ this.changeHobbyHandler }/>台球
        <hr />
        <input type="checkbox" onChange={ this.changeFlagHandler }/> 同意******协议
        <button onClick={() => {
          // console.log({
          //   firstName: this.state.firstName,
          //   lastName: this.state.lastName,
          //   note: this.state.note,
          //   lesson: this.state.lesson,
          //   sex: this.state.sex,
          //   hobby: this.state.hobby
          // })
          if (this.state.flag) {
            console.log({
              firstName: this.state.firstName,
              lastName: this.state.lastName,
              note: this.state.note,
              lesson: this.state.lesson,
              sex: this.state.sex,
              hobby: this.state.hobby
            })
          } else {
            alert('请先勾选同意用户协议')
          }
        }}>获取值</button>
      </div>
    )
  }
}
